<template>
  <div class="max-w-4xl mx-auto p-4">
    <a-card>
      <a-typography-title :level="2">JSON格式化工具</a-typography-title>
      
      <a-form layout="vertical">
      <!-- 输入区域 -->
        <a-form-item>
          <a-textarea
            v-model:value="inputJson"
          placeholder="请输入要格式化的JSON..."
            :rows="8"
            :auto-size="{ minRows: 8, maxRows: 16 }"
            class="font-mono"
          />
        </a-form-item>

      <!-- 操作按钮 -->
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="formatJson">
          格式化
            </a-button>
            <a-button @click="minifyJson">
          压缩
            </a-button>
            <a-button type="primary" ghost @click="validateJson">
              验证
            </a-button>
          </a-space>
        </a-form-item>

        <!-- 错误提示 -->
        <a-alert
          v-if="errorMessage"
          :type="errorType"
          :message="errorMessage"
          class="mb-6"
          show-icon
        />

      <!-- 结果区域 -->
        <template v-if="outputJson">
          <a-divider>处理结果</a-divider>
          <a-space direction="vertical" class="w-full">
            <div class="flex justify-end">
              <a-tooltip :title="copied ? '已复制！' : '复制到剪贴板'">
                <a-button
                  type="text"
            @click="copyToClipboard"
                  :icon="copied ? h(CheckOutlined) : h(CopyOutlined)"
                >
                  {{ copied ? '已复制' : '复制' }}
                </a-button>
              </a-tooltip>
        </div>
            <a-card class="w-full bg-gray-50 dark:bg-gray-700">
              <pre class="font-mono whitespace-pre-wrap break-all">{{ outputJson }}</pre>
            </a-card>
          </a-space>
        </template>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, h } from 'vue';
import { CopyOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const inputJson = ref('');
const outputJson = ref('');
const errorMessage = ref('');
const copied = ref(false);

const errorType = computed(() => {
  if (!errorMessage.value) return 'info';
  return errorMessage.value.startsWith('✅') ? 'success' : 'error';
});

const formatJson = () => {
  if (!inputJson.value) {
    message.warning('请输入要格式化的JSON');
    return;
  }

  try {
    const parsed = JSON.parse(inputJson.value);
    outputJson.value = JSON.stringify(parsed, null, 2);
    errorMessage.value = '';
    message.success('格式化成功！');
  } catch (err) {
    errorMessage.value = `JSON格式错误: ${(err as Error).message}`;
    outputJson.value = '';
    message.error('JSON格式错误');
  }
};

const minifyJson = () => {
  if (!inputJson.value) {
    message.warning('请输入要压缩的JSON');
    return;
  }

  try {
    const parsed = JSON.parse(inputJson.value);
    outputJson.value = JSON.stringify(parsed);
    errorMessage.value = '';
    message.success('压缩成功！');
  } catch (err) {
    errorMessage.value = `JSON格式错误: ${(err as Error).message}`;
    outputJson.value = '';
    message.error('JSON格式错误');
  }
};

const validateJson = () => {
  if (!inputJson.value) {
    message.warning('请输入要验证的JSON');
    return;
  }

  try {
    JSON.parse(inputJson.value);
    errorMessage.value = '✅ JSON格式有效';
    outputJson.value = '';
    message.success('验证通过！');
  } catch (err) {
    errorMessage.value = `❌ JSON格式无效: ${(err as Error).message}`;
    outputJson.value = '';
    message.error('验证失败！');
  }
};

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputJson.value);
    copied.value = true;
    message.success('复制成功！');
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  } catch (err) {
    message.error('复制失败，请重试');
    console.error('复制失败:', err);
  }
};
</script> 

<style scoped>
.ant-card {
  background-color: white;
}

:deep(.ant-card-body) {
  padding: 24px;
}

.dark .ant-card {
  background-color: #1f2937;
}
</style> 